<template>
  <van-sticky>
      <van-nav-bar
          :title="title"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="onBack"
          @click-right="showSearch = true"
          v-if="showSearch === false"
      >
          <template #right>
              <van-icon name="search" size="18" />
          </template>

      </van-nav-bar>

      <van-search
          v-model="search"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="showSearch = false"
          v-else
      />
  </van-sticky>
      
  <van-sticky offset-top="46">
      <van-dropdown-menu swipe-threshold="4">
          <van-dropdown-item v-model="typeid" :options="TypeOption" @change="onMenuOption" />
          <van-dropdown-item v-model="flag" :options="FlagOption" @change="onMenuOption" />
          <van-dropdown-item v-model="orderBy" :options="OrderByOption" @change="onMenuOption" />
          <van-dropdown-item v-model="By" :options="ByOption" @change="onMenuOption" />
      </van-dropdown-menu>
  </van-sticky>

  <div class="mainWarp" style="background:#f3f3f3;margin-top: 8px;">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
          >
              <ul class="proul">
                  <li v-for="item in list" :key="item.id">
                      <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                          <van-image
                              width="100%"
                              height="120"
                              fit="cover"
                              :src="item.thumb_cdn"
                          />
                      </router-link>
                      <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                          <p class="tit">{{ item.name }}</p>
                      </router-link>
                      <div class="price">
                          <p>￥{{ item.price }} / {{ item.unit.name ?? '个' }}</p>
                      </div>
                  </li>
              </ul>
          </van-list>
      </van-pull-refresh>

  </div>

</template>

<script setup>
const { proxy } = getCurrentInstance();

// 标题
const search = ref('');
const showSearch = ref(false);
const typeid = ref(0);
const flag = ref(0);
const orderBy = ref('createtime');
const By = ref('desc');
const TypeOption = ref([
  {text:'全部分类',value:0}
]);
const FlagOption = ref([
  {text:'全部商品',value:0},
  {text:'新品商品',value:1},
  {text:'热销商品',value:2},
  {text:'推荐商品',value:3}
]);
const OrderByOption = ref([
  {text:'上架时间',value:'createtime'},
  {text:'商品价格',value:'price'},
  {text:'商品库存',value:'stock'}
]);
let ByOption = ref([
  {text: '降序', value: 'desc'},
  {text: '升序', value: 'asc'},
]);
const title = ref(TypeOption.value[0].text);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
const page = ref(1);
const listCount = ref(0);

onBeforeMount(async () => {
  getTypeData();
})

const onRefresh = () => {
  finished.value = false;
  list.value = [];
  page.value = 1;
  loading.value = true;

  console.log(refreshing.value)

  onLoad();
}

const onLoad = () => {
  if(!refreshing.value && list.value.length < listCount.value)
  {
      page.value = page.value + 1;
  }

  // 如果处于刷新操作
  if(refreshing.value)
  {
      refreshing.value = false;
  }

  setTimeout(getProductData,1500);
}

const getProductData = async () => {
  let params = {
      typeid:typeid.value,
      flag:flag.value,
      orderBy:orderBy.value,
      By:By.value,
      search:search.value,
      page:page.value
  }

  let result = await proxy.$post({
      url:'/product/product/index',
      params
  })

  if(result.code === 1)
  {
      finished.value = false;
      loading.value = false;

      list.value = list.value.concat(result.data.list);
      listCount.value = result.data.count;

      if(list.value.length === listCount.value)
      {
          finished.value = true;
          loading.value = true;

          return false;
      }
  }else{
      finished.value = true;

      return false;
  }

}

const getTypeData = async () => {
  let result = await proxy.$post({
      url:'product/product/type'
  })

  if(result.code === 1)
  {
      let data = [];

      for(let item of result.data)
      {
          data.push({
              text:item.name,
              value:item.id
          })
      }

      data.unshift({
          text:'全部分类',
          value:0
      })

      TypeOption.value = data;
  }
}

const onSearch = () => {
  refreshing.value = true;

  onRefresh();
}

const onMenuOption = () => {
  refreshing.value = true;

  onRefresh();
}

const onBack = () => proxy.$router.back();
</script>